<template>
  <div class="hd history">
   

    <search-bar :menu="menu" :showsearch="false" :activeitem="activeitem"></search-bar>

    <div class="hd mt10">
      <div class="right-content" style="margin:0">
        <position style="padding:12px;width:auto;">
          <router-link to="/cloud">云诊室</router-link>
          &gt;
          <span class="last">我的预约</span>
          <select-role @btnclick="selectFamilyHandle" class="fr"></select-role>
        </position>

        <div class="clearfix main mt20" style="padding:0;">
          <div class="center">
            <el-radio-group v-model="radio3" @change="radioChange">
              <el-radio-button v-for="(ra, i) in PAY_STATUS" :label="ra" :key="i"></el-radio-button>
            </el-radio-group>


          </div>
          <div v-if = "lists.length > 0" class="mt20">
            <div class="my_appointment" v-for="list in lists" :key="list.id">
              <div class="illness_name">
                <span class="t3">就诊人：</span>
                <span>{{list.regName}}</span>
                &nbsp;&nbsp;&nbsp;
                <span class="t3">就诊序号：</span>
                <span class="f20 t6">{{list.regVisitingNumber}}</span>
              </div>
              <div class="myappoint_ul" >
                <ul class="top">
                  <li>
                    <img src="../../assets/就诊科室.png" alt="">&nbsp;&nbsp;
                    <span class="t3">就诊科室：</span>&nbsp;&nbsp;
                    <span>{{list.regDeptName}}</span>
                  </li>
                </ul>
                <ul class="middle">
                  <li class="left">
                    <img src="../../assets/医生.png" alt="">&nbsp;&nbsp;
                    <span class="t3">医&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;生：</span>&nbsp;&nbsp;
                    <span class="name">{{list.doctorName}}</span>
                  </li>
                  <li class="right">
                    <span class="t3">挂号费：</span>
                    <span class="f20 t6">{{list.charge}}</span>
                    <span>元</span>
                  </li>
                  <li class="state">
                    <span class="t3">状态：</span>
                    <span :class="[list.payStatus > 2 ? 't3' : 't1']">{{PAY_STATUS[list.payStatus]}}</span>
                    <el-button type="primary" size="small" class="infobtn" v-show="list.payStatus==2" @click="gotomeeting()">查看队列</el-button>
                    <el-button type="primary" size="tiny" class="infobtn" v-show="false">查看病历</el-button>
                    <el-button @click="cancelPay(list)" size="small" class="infobtn" v-show="list.payStatus === '2' && list.mayCancle === '0'">
                      <font color="#383838">取消订单</font>
                    </el-button>
                    <!--已就诊-查看病例-->
                    <!--带就诊-查看队列-->
                  </li>
                </ul>
                <ul  class="bottom">
                  <li>
                    <img src="../../assets/就诊时间.png" alt="">&nbsp;&nbsp;
                    <span class="t3">就诊时间：</span>&nbsp;&nbsp;
                    <span>{{list.workDate}} {{list.startTime}}-{{list.endTime}}</span>
                    <span class="meeting_tips" v-show="list.payStatus==2">请于就诊当天登录“我的预约”页面候诊，医生会按序呼叫</span>
                  </li>
                </ul>
                <ul class="position_left_time" v-if="list.payStatus === '1'">
                  <li v-if="list.regCloseTimeDisplay">
                    <p>
                      <left-time :displayTime="list.regCloseTimeDisplay" @outdate="list.canRepay=false"></left-time>
                    </p>
                    <a href="javascript:;" class="common-main-button" @click="rePay(list)" v-show="list.canRepay">
                      前往支付
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="no-data" v-else>暂无数据</div>

          <div class="border"></div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    commonAjax,
    PLATFORM_PREFIX,
    APPOINT_DESCRIPTION,
    CLOUD_MENU
  } from '../../api/api'
  import Loading from '../../components/Loading'
  import Position from '../../components/Position'
  import LeftTime from '../../components/LeftTime'
  import SelectRole from '../../components/SelectRole'
  import SiderMenu from '../../components/SiderMenu'
  import SearchBar from '../../components/SearchBar'

  export default {
    components: {Position, Loading, LeftTime, SelectRole, SiderMenu, SearchBar},
    data () {
      return {
        menu: CLOUD_MENU,
        activeitem: 3,
        person: JSON.parse(localStorage.person),
        pageNo: 1,
        pageSize: 50,
        lists: [],
        defaultLists: [],
        PAY_STATUS: ['全部', '待支付', '待就诊', '超时未支付', '已退号退费', '支付异常'],
        APPOINT_DESCRIPTION: APPOINT_DESCRIPTION,
        radio3: '全部',
        canRepay: true
      }
    },
    mounted () {
      document.body.scrollTop = 0
      this.getHistorys(this.person.mpiId)
    },
    methods: {
      rePay (list) {
        localStorage.list = JSON.stringify(list)
        this.$router.push('/cloud/pay?from=myappoint')
      },
      cancelPay (list) {
        localStorage.orderToCancel = JSON.stringify(list)
        this.$router.push('/cloud/cancelorder')
      },
      getHistorys (mpiId) {
        if (!mpiId) {
          return
        }
        this.$store.commit('UPDATE_LOADING')
        commonAjax(
          [mpiId, '5', this.pageNo, this.pageSize, 2],
          `${PLATFORM_PREFIX}.registrationService`,
          'getHistoryRegprepare'
        ).then(res => {
          this.$store.commit('UPDATE_LOADING')
          if (res.data.code === 200) {
            res.data.body.forEach(v => {
              v.canRepay = true
            })
            this.defaultLists = res.data.body || []
            this.lists = res.data.body || []
          }
        }).catch(res => {
          this.$store.commit('UPDATE_LOADING')
          localStorage.removeItem('accessToken')
          this.$message({
            message: '登录失效',
            type: 'error'
          })
        })
      },
      selectFamilyHandle (f) {
        this.person = f
        this.getHistorys(f.mpiId)
      },
      radioChange (val) {
        let _this = this
        this.lists = this.defaultLists.filter((v, i) => {
          if (_this.PAY_STATUS[0] === val) return true
          return _this.PAY_STATUS[v.payStatus] === val
        })
      },
      gotomeeting () {
        this.$router.push({
          path: '/cloud/meeting'
        })
      }
    }
  }
</script>

<style lang="less">
  .history{
    .my_appointment{
      position: relative;
      padding: 20px;
      &:hover{
        background: #fff;
        box-shadow: 1px 1px 1px rgba(0,0,0,.5)
      }
      border-top: 1px solid #FEF2E9;
    }
    .content .my_appointment img{
      vertical-align: middle;
    }
    .my_appointment .illness_name{
      height: 42px;
      line-height: 42px;
      margin:0 auto;
      border-bottom: 1px dashed #FEF2E9;
    }
    .my_appointment .illness_name span:nth-of-type(1){
      font-size: 14px;
      color: #666666;
    }
    .myappoint_ul .middle{
      overflow: hidden;
      margin-top: 10px;
      margin-left:20px;
    }
    .myappoint_ul .middle li{
      display: inline-block;
      width: 33%;
    }
    .myappoint_ul .top{
      margin-top: 20px;
      margin-left:20px;
    }
    .myappoint_ul .bottom{
      margin-left:20px;
      padding-bottom: 20px;
      margin-top: 10px;
    }
    .bottom>li{
      width:100%;
    }
    .myappoint_ul .bottom span:nth-of-type(1){
      color: #999999;
    }

    .myappoint_ul .middle .name{
      display: inline-block;
    }

    .myappoint_ul .middle .right{
      width: 200px;
    }
    .myappoint_ul .middle .state span:nth-of-type(1){
      color: #666666;
    }
    .position_left_time{
      position: absolute;
      right: 60px;
      top: 70px;
    }
    .position_left_time span:nth-of-type(1){
      color: #ff9900;
    }
    .position_left_time span:nth-of-type(2){
      color: #993333;
    }
    .position_left_time div{
      width: 82px;
      line-height: 36px;
      text-align:center;
      background-color: rgb(146,59,29);
      border-radius: 4px;
      color: #ffffff;
      margin-left: 10px;
      cursor: pointer;
      &.cancel {
        background: #ccc;
        color:#fff;
      }
    }
    .border{
      height: 1px;
      background-color: #cccccc;
      margin:20px auto;
    }
    .warn{
      margin: 20px;
      li{
        color: #666666;
        margin-top: 10px;
      }
    }
  }
  .meeting_tips{
    float:right;
    color:#f35e0d;
  }
  .infobtn{
    float:right;
    margin:0 10px;
  }
  .infobtn span{
    color:white!important;
  }

</style>
